<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .inputGroup {
        font-family: "Segoe UI", sans-serif;
        margin: 1em 0 1em 0;
        max-width: 190px;
        position: relative;
      }

      .inputGroup input {
        font-size: 100%;
        padding: 0.8em;
        outline: none;
        border: 2px solid rgb(200, 200, 200);
        background-color: transparent;
        border-radius: 20px;
        width: 100%;
      }

      .inputGroup label {
        font-size: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0.8em;
        margin-left: 0.5em;
        pointer-events: none;
        transition: all 0.3s ease;
        color: rgb(100, 100, 100);
      }

      .inputGroup :is(input:focus, input:valid) ~ label {
        transform: translateY(-50%) scale(0.9);
        margin: 0em;
        margin-left: 1.3em;
        padding: 0.4em;
        background-color: white;
      }

      .inputGroup :is(input:focus, input:valid) {
        border-color: rgb(150, 150, 200);
      }
    </style>
  </head>
  <body>
    <div class="inputGroup">
      <input type="text" required="" autocomplete="off" />
      <label for="name">Name</label>
    </div>
  </body>
</html>
